import deepcopy from "deepcopy";
import { useEffect, useMemo, useRef, useState } from "react";

export const BaseScrollList: React.FC<{
  headerData: string[];
  headerBg?: string;
  rowsData: {}[];
  baseBg?: string;
  height?: string;
  rowNum?: number;
  time?: number;
}> = (props) => {
  const {
    headerData,
    headerBg,
    rowNum = 5,
    baseBg,
    height,
    rowsData,
    time,
  } = props;

  const width = 100 / headerData.length + "%";
  const length = rowsData.length;
  const [currentRowData, setCurrentRowData] = useState(
    rowsData.slice(0, rowNum)
  );
  const currentIndex = useRef(-1);
  const currentHeight = useRef();
  const ref = useRef(null) as any;

  //控制列表背景颜色显示，有动画的效果
  let isShow = useRef("show");
  useMemo(() => {
    isShow.current = isShow.current === "show" ? "hidden" : "show";
    return isShow;
  }, [currentRowData]);

  const startAnimation = async () => {
    if (rowNum > length) return;
    if (currentIndex.current >= length) currentIndex.current = 0;
    const _rowsData = deepcopy(rowsData);
    setCurrentRowData(() => {
      currentIndex.current += 1;
      return _rowsData
        .slice(currentIndex.current)
        .concat(_rowsData.slice(0, currentIndex.current));
    });

    await new Promise((resolve) => setTimeout(resolve, time));
    await startAnimation();
  };

  useEffect(() => {
    currentHeight.current = ref.current.offsetHeight;
    startAnimation();
  }, []);

  return (
    <div className="base-scroll-list" style={{ background: baseBg }}>
      <div className="base-scroll-list-header">
        {headerData.map((item, index) => {
          return (
            <div
              className="header-item"
              style={{
                height: height,
                width: width,
                backgroundColor: headerBg,
              }}
              key={index}
            >
              {item}
            </div>
          );
        })}
      </div>
      <div
        ref={ref}
        className="container"
        style={{ height: currentHeight.current }}
      >
        {currentRowData.map((item, index) => {
          let color = "";
          if (isShow.current === "show") {
            color = index % 2 === 0 ? "" : "white";
          } else {
            color = (index + 1) % 2 === 0 ? "" : "white";
          }
          return (
            <div
              className="base-scroll-list-rows"
              key={index}
              style={index === 0 ? { height: isShow.current } : {}}
            >
              <ul style={{ background: color }}>
                {Object.values(item).map((val, i) => {
                  return (
                    <li key={i} style={{ width: width }}>
                      {val as any}
                    </li>
                  );
                })}
              </ul>
            </div>
          );
        })}
      </div>
    </div>
  );
};
BaseScrollList.defaultProps = {
  baseBg: "rgb(90, 90, 90)",
  headerBg: "yellowgreen",
  rowNum: 5,
  time: 2000,
};
export default BaseScrollList;
